<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="90%"
    :close-on-click-modal="false"
    destroy-on-close
    class="workflow-preview-dialog"
  >
    <div class="dialog-content">
      <el-tabs v-model="activeTab" class="preview-tabs">
        <!-- 基本信息标签页 -->
        <el-tab-pane label="基本信息" name="basic">
          <div class="basic-info-section">
            <el-descriptions :column="2" border>
              <el-descriptions-item label="工作流名称">
                <span class="info-value">{{ workflow?.basicInfo?.name || '-' }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="版本号">
                <el-tag size="small" type="primary">v{{ workflow?.metadata?.version || '1.0.0' }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="状态">
                <el-tag 
                  size="small" 
                  :type="workflow?.status === 'enabled' ? 'success' : 'danger'"
                >
                  {{ workflow?.status === 'enabled' ? '启用' : '禁用' }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间">
                {{ formatDate(workflow?.metadata?.exportTime) }}
              </el-descriptions-item>
              <el-descriptions-item label="工作流描述" :span="2">
                <div class="description-content">
                  {{ workflow?.basicInfo?.description || '暂无描述' }}
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-tab-pane>

        <!-- 表单设计标签页 -->
        <el-tab-pane label="表单设计" name="form">
          <div class="form-preview-section">
            <div v-if="formFields.length > 0" class="form-content">
              <div class="section-header">
                <h3>表单字段预览</h3>
                <span class="field-count">共 {{ formFields.length }} 个字段</span>
              </div>
              
              <!-- 表单字段列表 -->
              <div class="field-list">
                <div 
                  v-for="(field, index) in formFields" 
                  :key="field.id || index"
                  class="field-item"
                >
                  <div class="field-header">
                    <div class="field-info">
                      <span class="field-label">
                        {{ field.label }}
                        <el-tag v-if="field.required" size="small" type="danger">必填</el-tag>
                      </span>
                      <span class="field-type">{{ getFieldTypeLabel(field.type) }}</span>
                    </div>
                  </div>
                  
                  <div class="field-details">
                    <div v-if="field.placeholder" class="field-detail">
                      <span class="detail-label">占位符：</span>
                      <span class="detail-value">{{ field.placeholder }}</span>
                    </div>
                    
                    <div v-if="field.defaultValue" class="field-detail">
                      <span class="detail-label">默认值：</span>
                      <span class="detail-value">{{ field.defaultValue }}</span>
                    </div>
                    
                    <div v-if="field.options && field.options.length > 0" class="field-detail">
                      <span class="detail-label">选项：</span>
                      <div class="options-list">
                        <el-tag 
                          v-for="option in field.options" 
                          :key="option.value"
                          size="small"
                          class="option-tag"
                        >
                          {{ option.label }}
                        </el-tag>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 表单预览 -->
              <div class="form-preview">
                <div class="section-header">
                  <h3>表单预览</h3>
                </div>
                <div class="preview-container">
                  <FormPreview :fields="formFields" />
                </div>
              </div>
            </div>
            
            <div v-else class="no-form">
              <el-empty description="该工作流暂无表单设计" />
            </div>
          </div>
        </el-tab-pane>

        <!-- 流程设计标签页 -->
        <el-tab-pane label="流程设计" name="flow">
          <div class="flow-preview-section">
            <div v-if="workflow?.flowConfig" class="flow-content">
              <div class="section-header">
                <h3>流程配置信息</h3>
              </div>
              
              <el-descriptions :column="2" border>
                <el-descriptions-item label="节点名称">
                  {{ workflow.flowConfig.nodeName || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="节点类型">
                  {{ getNodeTypeLabel(workflow.flowConfig.type) }}
                </el-descriptions-item>
                <el-descriptions-item label="优先级">
                  {{ workflow.flowConfig.priorityLevel || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="审批模式">
                  {{ workflow.flowConfig.examineMode || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="选择模式">
                  {{ workflow.flowConfig.selectMode || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="选择范围">
                  {{ workflow.flowConfig.selectRange || '-' }}
                </el-descriptions-item>
              </el-descriptions>
              
              <!-- 流程图预览区域 -->
              <div class="flow-diagram">
                <div class="section-header">
                  <h3>流程图预览</h3>
                </div>
                <div class="diagram-container">
                  <el-alert
                    title="流程图预览"
                    type="info"
                    :closable="false"
                    show-icon
                  >
                    <template #default>
                      <p>流程图预览功能正在开发中，敬请期待。</p>
                      <p>当前流程起始节点：{{ workflow.flowConfig.nodeName }}</p>
                    </template>
                  </el-alert>
                </div>
              </div>
            </div>
            
            <div v-else class="no-flow">
              <el-empty description="该工作流暂无流程设计" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button 
          type="primary" 
          @click="handleStartWorkflow"
          :disabled="workflow?.status !== 'enabled'"
        >
          启动工作流
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import FormPreview from '/@/components/FormDesigner/FormPreview.vue'
import type { WorkflowConfiguration } from '../types'
import type { FormField } from '/@/components/FormDesigner/types'

interface Props {
  visible: boolean
  workflow: WorkflowConfiguration | null
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'start-workflow', workflow: WorkflowConfiguration): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 响应式数据
const activeTab = ref('basic')

// 弹窗显示状态
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit('update:visible', value)
})

// 弹窗标题
const dialogTitle = computed(() => {
  return `工作流预览 - ${props.workflow?.basicInfo?.name || ''}`
})

// 表单字段
const formFields = computed<FormField[]>(() => {
  return props.workflow?.formConfig?.fields || []
})

// 方法
const formatDate = (dateString?: string) => {
  if (!dateString) return '-'
  try {
    return new Date(dateString).toLocaleString('zh-CN')
  } catch {
    return '-'
  }
}

const getFieldTypeLabel = (type: string) => {
  const typeMap: Record<string, string> = {
    text: '单行文本',
    textarea: '多行文本',
    number: '数字',
    select: '下拉选择',
    radio: '单选按钮',
    checkbox: '多选框',
    date: '日期',
    datetime: '日期时间',
    switch: '开关'
  }
  return typeMap[type] || type
}

const getNodeTypeLabel = (type: number) => {
  const typeMap: Record<number, string> = {
    0: '发起人',
    1: '审批人',
    2: '抄送人',
    3: '条件分支',
    4: '并行分支'
  }
  return typeMap[type] || `类型${type}`
}

const handleClose = () => {
  dialogVisible.value = false
}

const handleStartWorkflow = () => {
  if (!props.workflow) {
    ElMessage.error('工作流信息不完整')
    return
  }
  
  if (props.workflow.status !== 'enabled') {
    ElMessage.warning('该工作流已禁用，无法启动')
    return
  }
  
  emit('start-workflow', props.workflow)
  dialogVisible.value = false
}
</script>

<style scoped>
.workflow-preview-dialog {
  :deep(.el-dialog) {
    margin-top: 3vh;
    margin-bottom: 3vh;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
  }
  
  :deep(.el-dialog__header) {
    padding: 20px 24px 16px;
    border-bottom: 1px solid #e4e7ed;
  }
  
  :deep(.el-dialog__body) {
    padding: 0;
    flex: 1;
    overflow: hidden;
  }
  
  :deep(.el-dialog__footer) {
    padding: 16px 24px 20px;
    border-top: 1px solid #e4e7ed;
  }
}

.dialog-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.preview-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  
  :deep(.el-tabs__content) {
    flex: 1;
    overflow: auto;
    padding: 20px 24px;
  }
  
  :deep(.el-tabs__header) {
    margin: 0;
    padding: 0 24px;
    border-bottom: 1px solid #e4e7ed;
  }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #303133;
}

.field-count {
  color: #909399;
  font-size: 14px;
}

.basic-info-section {
  :deep(.el-descriptions__label) {
    font-weight: 500;
  }
}

.info-value {
  color: #303133;
}

.description-content {
  line-height: 1.6;
  color: #606266;
}

.form-preview-section {
  .field-list {
    margin-bottom: 32px;
  }
  
  .field-item {
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
    background: #fafafa;
  }
  
  .field-header {
    margin-bottom: 12px;
  }
  
  .field-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .field-label {
    font-weight: 500;
    color: #303133;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .field-type {
    color: #909399;
    font-size: 12px;
    background: #f0f2f5;
    padding: 2px 8px;
    border-radius: 4px;
  }
  
  .field-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .field-detail {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }
  
  .detail-label {
    color: #606266;
    font-size: 14px;
    min-width: 60px;
    flex-shrink: 0;
  }
  
  .detail-value {
    color: #303133;
    font-size: 14px;
  }
  
  .options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .option-tag {
    margin: 0;
  }
  
  .form-preview {
    border-top: 1px solid #e4e7ed;
    padding-top: 24px;
  }
  
  .preview-container {
    background: white;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    padding: 20px;
  }
}

.flow-preview-section {
  .flow-content {
    :deep(.el-descriptions) {
      margin-bottom: 24px;
    }
  }
  
  .flow-diagram {
    border-top: 1px solid #e4e7ed;
    padding-top: 24px;
  }
  
  .diagram-container {
    min-height: 200px;
  }
}

.no-form,
.no-flow {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

@media (max-width: 768px) {
  .workflow-preview-dialog {
    :deep(.el-dialog) {
      width: 95% !important;
      margin: 2.5vh auto;
    }
  }
  
  .preview-tabs {
    :deep(.el-tabs__content) {
      padding: 16px;
    }
    
    :deep(.el-tabs__header) {
      padding: 0 16px;
    }
  }
  
  .field-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .field-detail {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  
  .detail-label {
    min-width: auto;
  }
}
</style>